<template>
  <view>
    <view class="artworks-container">
      <view class="artworks-container-top">
        <view class="artworks-container-top-left">
          <view
            v-for="(item, index) in selectShowTypeList"
            :key="index"
            class="module-item"
            :class="{
              'active-item': currentShowType === index
            }"
            @click="handleShowType(index)">{{ item.name }}</view>
        </view>
        <view class="artworks-container-top-right" @click="showSelectSortType = true">
          <u-icon name="grid" color="#56d39d" size="28"></u-icon>
          <text>展示模式</text>
        </view>
      </view>
      <!-- 分类 -->
      <view v-if="currentShowType === 0" class="tabs-container">
        <u-tabs
          :list="artworksTypeAllListData"
          :current="tabsCurrent"
          inactive-color="#888"
          active-color="#56d39d"
          :gutter="12"
          font-size="28"
          bg-color="transparent"
          class="tabs-content"
          name="type_name"
          @change="tabsChange"></u-tabs>
      </view>
      <!-- 作品模式 -->
      <block v-if="currentShowType === 0">
        <!-- 作品 -->
        <view class="artworks-list-container">
          <!-- 头像、表情包 -->
          <ArtworksSquareList
            v-if="artworksTypeAllListData[tabsCurrent].id === 2 || artworksTypeAllListData[tabsCurrent].id === 3"
            :artworks-list="artworksList"
            :is-batch="isBatch"
            @handleCheckBox="handleCheckBox"/>
          <!-- 壁纸 -->
          <WallpaperArtworksList
            v-if="artworksTypeAllListData[tabsCurrent].id === 1"
            :artworks-list="artworksList"
            :is-batch="isBatch"
            @handleCheckBox="handleCheckBox"/>
          <!-- 文案素材 -->
          <WechatCircle
            v-if="artworksTypeAllListData[tabsCurrent].id === 11"
            :artworks-list="artworksList"
            :is-batch="isBatch"
            :avatar="author.authorList[author.authorCurrent].avatar"
            @handleCheckBox="handleCheckBox"
            @handleArtworks="handleWechatCircleArtworks"
            @handleDeleteSign="batchDeleteArtworksFn"/>
          <!-- 背景 -->
          <BgArtworksList
            v-if="artworksTypeAllListData[tabsCurrent].id === 6 || artworksTypeAllListData[tabsCurrent].id === 8"
            :artworks-list="artworksList"
            :is-batch="isBatch"
            @handleCheckBox="handleCheckBox"/>
          <!-- 文字模板 -->
          <TextTemplateList
            v-if="artworksTypeAllListData[tabsCurrent].id === 7"
            :artworks-list="artworksList"
            :is-batch="isBatch"
            is-artworks="1"
            @handleCheckBox="handleCheckBox"/>
          <!-- 工具玩法 -->
          <ToolCellList
            v-if="artworksTypeAllListData[tabsCurrent].id === 9"
            :artworks-list="artworksList"
            :is-batch="isBatch"
            is-artworks="1"
            @handleToolItem="handleToolItem"
            @handleCheckBox="handleCheckBox"/>
          <!-- 动态壁纸 -->
          <VideoArtworksList
            v-if="artworksTypeAllListData[tabsCurrent].id === 4"
            :artworks-list="artworksList"
            :is-batch="isBatch"
            @handleCheckBox="handleCheckBox"/>
          <!-- 电视剧 -->
          <TvArtworksList
          v-if="artworksTypeAllListData[tabsCurrent].id === 5"
          :artworks-list="artworksList"
          :is-batch="isBatch"
          @handleCheckBox="handleCheckBox"/>
          <!-- 全部 -->
          <AllArtworksList
          v-if="!artworksTypeAllListData[tabsCurrent].id"
          :artworks-list="artworksList"
          :is-batch="isBatch"
          @handleCheckBox="handleCheckBox"
          @handleArtworks="handleWechatCircleArtworks"/>
          <!-- 提示上传 -->
          <u-empty v-if="artworksList.length === 0" text="没有作品数据，点击下方进行添加" mode="data" style="margin-bottom: 100rpx"></u-empty>
          <!-- 提示没有数据 -->
          <!-- <u-empty v-else-if="artworksList.length > 0" text="没有更多的数据啦~" mode="data" style="margin-bottom: 100rpx"></u-empty> -->
        </view>
      </block>
      <!-- 专辑模式 -->
      <block v-else>
        <AlbumList :album-list="arthorAlbumList" @editAlbumSuccess="editAlbumSuccess"></AlbumList>
      </block>
    </view>
    <!-- 操作栏 -->
    <view class="bottom-main">
      <view v-if="currentShowType === 0" class="bottom-view">
        <block v-if="!isBatch">
          <view class="bottom-view-button bottom-view-button-before" @click="isBatch = true">
            <u-icon name="edit-pen" color="#56d39d" size="28"></u-icon>
            <text class="bottom-view-button-text">批量操作</text>
          </view>
          <view class="bottom-view-button bottom-view-button-before" @click="goPublishTool()">
            <u-icon name="plus" color="#56d39d" size="28"></u-icon>
            <text class="bottom-view-button-text">添加玩法</text>
            <image class="new-icon" src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01yqSlca2BzNSd8de82_!!1888948409.png"></image>
          </view>
          <view class="bottom-view-button bottom-view-button-margin0" @click="goPublishArtworks()">
            <u-icon name="arrow-upward" color="#56d39d" size="28"></u-icon>
            <text class="bottom-view-button-text">上传作品</text>
          </view>
        </block>
        <block v-else>
          <view class="bottom-view-button bottom-view-button-padding bottom-view-button-before" @click="isBatch = false">
            <text class="huiju-iconfont huiju-icon-fanhui1"></text>
            <text class="bottom-view-button-text">退出</text>
          </view>
          <view @click="handleBatchUpdateArtworks('is_top')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-zhiding"></text>
            <text class="bottom-view-button-text">置顶</text>
          </view>
          <view @click="handleBatchUpdateArtworks('cancel_top')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-quxiaozhiding"></text>
            <text class="bottom-view-button-text">取消置顶</text>
          </view>
          <view @click="handleBatchUpdateArtworks('delete')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-shanchu"></text>
            <text class="bottom-view-button-text">删除</text>
          </view>
          <view @click="goSort()" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-paixu1"></text>
            <text class="bottom-view-button-text">排序</text>
          </view>
          <view @click="goMoveArtworks()" class="bottom-view-button bottom-view-button-padding bottom-view-button-margin0">
            <text class="huiju-iconfont huiju-icon-yidong-xuanzhong-12"></text>
            <text class="bottom-view-button-text">移动</text>
          </view>
        </block>
      </view>
      <view v-if="currentShowType === 1" class="bottom-view">
        <view @click="handleCreateArtworksAlbum()" class="bottom-view-button bottom-view-button-before">
          <text class="huiju-iconfont huiju-icon-ico_classify_unfold"></text>
          <text class="bottom-view-button-text">创建专辑</text>
        </view>
        <view class="bottom-view-button bottom-view-button-before" @click="goPublishTool()">
          <u-icon name="plus" color="#56d39d" size="28"></u-icon>
          <text class="bottom-view-button-text">添加玩法</text>
          <image class="new-icon" src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01yqSlca2BzNSd8de82_!!1888948409.png"></image>
        </view>
        <view @click="goAlbumSort()" class="bottom-view-button bottom-view-button-margin0">
          <text class="huiju-iconfont huiju-icon-paixu1"></text>
          <text class="bottom-view-button-text">专辑排序</text>
        </view>
      </view>
    </view>

    <!-- 设置排序 -->
    <u-modal
      v-model="showSelectSortType"
      :zoom="false"
      :show-title="false"
      :show-confirm-button="false"
      :mask-close-able="true">
      <view class="select-sort-container">
        <view class="title_">请选择展示模式</view>
        <view v-if="author.authorList && author.authorList.length > 0" class="select-sort-content">
          <view class="select-sort-left">
            <view class="applet-title">平台端</view>
            <view
              class="select-sort-item"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].client_sort === '1'
              }"
              @click="handleSortType('client_sort', '1')">
              <u-icon name="grid" size="28" class="select-sort-item-icon"></u-icon>
              <text>默认排序</text>
            </view>
            <view
              class="select-sort-item"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].client_sort === '2'
              }"
              @click="handleSortType('client_sort', '2')">
              <u-icon name="calendar" size="28" class="select-sort-item-icon"></u-icon>
              <text>日期排序</text>
            </view>
            <!-- <view
              class="select-sort-item select-sort-item-bottom0"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].client_sort === '3'
              }"
              @click="handleSortType('client_sort', '3')">
              <text class="huiju-iconfont huiju-icon-paixu1 select-sort-item-icon"></text>
              <text>智能排序</text>
            </view> -->
          </view>
          <view class="select-sort-right">
            <view class="applet-title">小程序端</view>
            <view
              class="select-sort-item"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].mini_sort === '1'
              }"
              @click="handleSortType('mini_sort', '1')">
              <u-icon name="grid" size="28" class="select-sort-item-icon"></u-icon>
              <text>默认排序</text>
            </view>
            <view
              class="select-sort-item"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].mini_sort === '2'
              }"
              @click="handleSortType('mini_sort', '2')">
              <u-icon name="calendar" size="28" class="select-sort-item-icon"></u-icon>
              <text>日期排序</text>
            </view>
            <!-- <view
              class="select-sort-item select-sort-item-bottom0"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].mini_sort === '3'
              }"
              @click="handleSortType('mini_sort', '3')">
              <text class="huiju-iconfont huiju-icon-paixu1 select-sort-item-icon"></text>
              <text>智能排序</text>
            </view> -->
          </view>
        </view>
        <!-- 提示 -->
        <view class="select-sort-tips">
          默认排序：置顶&gt;最新上传&gt;自定义排序
          <br>
          日期排序：素材按上传时间自动排序归类
          <br>
          智能排序：素材按当日下载量自动排序，置顶&gt;当日下载量&gt;自定义排序&gt;最新上传
        </view>
      </view>
    </u-modal>
    <!-- 获取免广告码 -->
    <u-modal
      v-model="showToolTips"
      :zoom="false"
      :show-title="false"
      :show-confirm-button="false"
      :mask-close-able="true">
      <view class="tool-container">
        <view class="tool-tip-title">我要推广</view>
        <!-- 教程视频 -->
        <view v-if="playVideo" class="video-view">
          <video
            :src="playVideo"
            :webkit-playsinline="true"
            :danmu-btn="false"
            :auto-play="true"
            poster="https://img.alicdn.com/imgextra/i3/1888948409/O1CN018LIsLB2BzNSdGcUQA_!!1888948409.jpg"
            controls
            object-fit="contain"
            class="video-guide">
          </video>
        </view>
        <view class="tool-content">
          <!-- 按钮 -->
          <view class="tool-btn" @click="getDouYinQrCode">
            <u-icon name="grid" color="#fff" size="32" style="margin-right: 8rpx;"></u-icon>
            获取免广告体验码
          </view>
          <view class="tool-qrcode">
            <image v-if="!douyinQrcode" class="qrcode-image" src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN016Bsl3P2BzNSdH5Hya_!!1888948409.png"></image>
            <block v-else>
              <image class="qrcode-image" :src="douyinQrcode"></image>
              <view class="save-tip">长按保存免广告体验码</view>
            </block>
          </view>
        </view>
        <view class="close-btn" @click="showToolTips = false">
          <u-icon name="close" color="#fff" size="38" style="margin-right: 8rpx;"></u-icon>
        </view>
        <canvas canvas-id="qrcode" style="width: 800rpx;height: 800rpx; position: absolute; top: -2000rpx;" />
      </view>
    </u-modal>
    <!-- 选择口令 -->
    <u-select
      v-model="codeInfo.showSelectCode"
      :list="codeInfo.codeList"
      confirm-color="#56d39d"
      value-name="code"
      label-name="code"
      @confirm="confirmCode"></u-select>

    <!-- 创建专辑 -->
    <CreateArtworksAlbum
      :popup-show="createAlbum.popupShow"
      :popup-title="createAlbum.popupTitle"
      :album-info="createAlbum.albumInfo"
      @close="closeCreateArtworksAlbum"
      @success="getAllAlbumByAuthorId"></CreateArtworksAlbum>

    <!-- 推荐资源图标 -->
    <view class="album-list-icon" @click="goAlbumList"></view>
  </view>
</template>

<script>
  import ArtworksSquareList from '@/components/artworksList/artworksSquareList.vue'; // 头像、表情包
  import WallpaperArtworksList from '@/components/artworksList/artworksList3.vue'; // 壁纸
  import BgArtworksList from '@/components/artworksList/artworksBgList.vue'; // 背景
  import VideoArtworksList from '@/components/artworksList/videoArtworksList3.vue'; // 动态背景
  import TvArtworksList from '@/components/artworksList/tvArtworksList.vue'; // 电视剧
  import TextTemplateList from '@/components/artworksList/textTemplate.vue'; // 文字模板
  import ToolCellList from '@/components/artworksList/toolCellList.vue'; // 文字模板
  import AllArtworksList from '@/components/artworksList/allArtworksList.vue'; // 全部
  import WechatCircle from '@/components/artworksList/wechatCircle.vue'; // 文案素材
  import AlbumList from '@/components/albumList/albumList.vue'; // 专辑列表
  import CreateArtworksAlbum from '@/components/createArtworksAlbum/createArtworksAlbum'; // 创建专辑
  import uQRCode from '@/utils/uqrcode.js'
  import { createDouYinQrCode } from '@/api/applet';
  import {
    findAllArtworksListByHomePage,
    findAllAlbum,
    batchUpdateArtworks,
    batchDeleteArtworks,
    merchantAuthorEdit,
    codeByUserId
  } from '@/api/artworks';
  import config from '@/utils/config';
  export default {
    components: {
      ArtworksSquareList,
      WallpaperArtworksList,
      BgArtworksList,
      VideoArtworksList,
      TvArtworksList,
      TextTemplateList,
      ToolCellList,
      AllArtworksList,
      AlbumList,
      WechatCircle,
      CreateArtworksAlbum,
    },
    props: {
      authorInfo: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        createAlbum: {
          popupShow: false,
          popupTitle: '创建新专辑',
          albumInfo: {
            name: '', // 专辑名称
            is_top: '', // 是否置顶
            author_id: '', // 主页id
            artworks_type_id: '' // 作品类型
          }
        },
        showToolTips: false,
        author: null,
        showSelectSortType: false, // 选择排序的模式
        playVideo: config.toolPlayVideo,
        isBatch: false, // 是否批量操作
        selectShowTypeList: [{
          name: '作品(0)'
        }, {
          name: '专辑(0)'
        }], // 选择展示类型
        tabsCurrent: 0, // 当前的tabs-index
        artworksList: [], // 作品列表
        pageNum: 1,
        showNoMoreFlag: false,
        loadingList: true,
        arthorAlbumList: [], // 达人专辑列表
        currentShowType: 0, // 显示的模式类型
        douyinQrcode: '', // 抖音二维码
        currentToolId: '', // 当前激活的工具
        codeInfo: {
          codeList: [],
          showSelect: false,
        },
        artworksTypeAllListData: [],
      }
    },
    watch: {
      '$store.state.artworksTypeAllListData': {
        immediate: true,
        handler(val) {
          if (val) {
            this.getArtworksTypeAllListData();
          }
        }
      },
      authorInfo: {
        deep: true,
        immediate: true,
        handler(val) {
          this.author = val;
          this.onChangeAuthorHome();
        }
      }
    },
    created() {
      // this.onChangeAuthorHome();
      this.onPageReachBottom();
    },
    methods: {

      // 推荐资源
      goAlbumList() {
        uni.navigateTo({
          url: '/pages/commonAlbumPublish/list?author_id=' + this.author.authorList[this.author.authorCurrent].id
        })
      },

      // 监听主页的变化
      onChangeAuthorHome() {
        this.pageNum = 1;
        this.artworksList = [];
        if (this.currentShowType === 0) {
          this.getAllArtworksList();
        } else {
          this.getAllAlbumByAuthorId();
        }
      },

      // 作品分类
      getArtworksTypeAllListData() {
        const artworksTypeAllListData = this.$store.state.artworksTypeAllListData;
        this.artworksTypeAllListData = [
          ...[{ type_name: '全部', id: '' }],
          ...artworksTypeAllListData
        ];
      },

      // 点击修改模式
      handleSortType(updateType, sortType) {
        let params = {};
        if (updateType === 'client_sort') {
          params = {
            id: this.author.authorList[this.author.authorCurrent].id,
            'client_sort': sortType
          }
        } else if (updateType === 'mini_sort') {
          params = {
            id: this.author.authorList[this.author.authorCurrent].id,
            'mini_sort': sortType
          }
        }
        uni.showToast({
          title: '设置中...',
          icon: 'loading',
          duration: 5 * 1000
        })
        merchantAuthorEdit(params).then(result => {
          uni.hideToast();
          if (result && result.code === 200) {
            this.showSelectSortType = false;
            this.$emit('onChangeAuthorHomeInfo');
            // this.getAuthorInfoByUserId();
          }
        })
      },

      // 点击置顶操作 is_top 置顶 cancel_top取消置顶
      handleBatchUpdateArtworks(batchType) {
        const artworksList = this.artworksList;
        this.pageNum = 1;
        const flag = artworksList.some(item => {
          return item.checked
        })
        if (!flag) {
          uni.showToast({
            title: '请选择，在操作',
            icon: 'none'
          })
          return;
        }
        const ids = []; // id集合
        artworksList.forEach(item => {
          if (item.checked) {
            ids.push(item.id);
          } 
        })
        if (batchType === 'is_top') {
          this.batchUpdateArtworksFn(1, ids);
        } else if (batchType === 'cancel_top') {
          this.batchUpdateArtworksFn(0, ids);
        } else if (batchType === 'delete') {
          this.batchDeleteArtworksFn(ids);
        }
      },

      // 置顶操作方法
      batchUpdateArtworksFn(is_top, ids) {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        batchUpdateArtworks({
          is_top,
          ids
        }).then(result => {
          if (result && result.code === 200) {
            uni.hideToast();
            this.getAllArtworksList();
          }
        })
      },

      // 批量删除
      batchDeleteArtworksFn(ids) {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        batchDeleteArtworks({
          ids
        }).then(result => {
          if (result && result.code === 200) {
            uni.hideToast();
            this.getAllArtworksList();
          }
        })
      },

      // 根据主页id和作品类型去获取作品列表
      getAllArtworksList(loadMore) {
        if (!loadMore) {
          this.artworksList = [];
        }
        this.showNoMoreFlag = false;
        this.loadingList = true;
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const type = this.artworksTypeAllListData[this.tabsCurrent].id; // 类型id
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        findAllArtworksListByHomePage({
          author_id,
          type,
          pageSize: 36,
          pageNum: this.pageNum,
        }).then(result => {
          uni.hideLoading();
          this.loadingList = false;
          if (result && result.data) {
            // this.selectShowTypeList[0].name = `作品(${result.data.artworksNum})`;
            // this.selectShowTypeList[1].name = `专集(${result.data.albumNum})`;
            this.selectShowTypeList = [{
              name: `作品(${result.data.artworksNum})`
            }, {
              name: `专辑(${result.data.albumNum})`
            }]
            let artworksList = result.data.list;
            artworksList.forEach(item => {
              item.checked = false;
              if (item.wechat_content) {
                item.wechat_circle_content = item.wechat_content.replace(/(\n|\r|\r\n|↵)/g, '<br/>');
              }
            })
            this.artworksList = [ ...this.artworksList, ...artworksList ];
            if (this.pageNum === result.data.total_pages) {
              this.showNoMoreFlag = true;
            } else {
              this.pageNum = this.pageNum + 1;
            }
          } else {
            this.artworksList = [];
          }
        }).catch(() => {
          uni.hideLoading();
          this.loadingList = false;
        })
      },

      // 获取创作者全部的专辑和专辑中的作品
      getAllAlbumByAuthorId() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const artworks_type_id = this.artworksTypeAllListData[this.tabsCurrent].id; // 类型id
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        findAllAlbum({ author_id, artworks_type_id }).then(result => {
          uni.hideLoading();
          if (result && result.data) {
            this.selectShowTypeList = [{
              name: `作品(${result.data.artworksNum})`
            }, {
              name: `专辑(${result.data.albumNum})`
            }]
            this.arthorAlbumList = result.data.list;
          }
        }).catch(() => {
          uni.hideLoading();
        })
      },

      // 免广告码
      handleToolItem(toolId) {
        if (toolId) {
          this.currentToolId = toolId;
          this.douyinQrcode = '';
          this.showToolTips = true;
        }
      },

      // 朋友圈素材
      handleWechatCircleArtworks(itemData) {
        if (itemData.type === 11) {
          uni.navigateTo({
            url: `/pages/wechatCircle/uploadWechatCircle?author_id=${itemData.author_id}&id=${itemData.id}`
          })
        } else if (itemData.type === 9) {
          this.currentToolId = itemData.tool_id;
          this.douyinQrcode = '';
          this.showToolTips = true;
        }
      },

      // 获取code信息列表
      getCodeList() {
        codeByUserId().then(result => {
          if (result && result.data && result.data.length > 0) {
            this.codeInfo.codeList = result.data;
          }
        })
      },

      // 前往移动作品
      goMoveArtworks() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const type = this.artworksTypeAllListData[this.tabsCurrent].id; // 类型id
        uni.navigateTo({
          url: `/pages/artworks/movePhoto?author_id=${author_id}&type=${type}&tabsCurrent=${this.tabsCurrent}`
        })
      },

      // 选择框
      handleCheckBox(val) {
        this.artworksList[val].checked = !this.artworksList[val].checked;
      },

      // 获取抖音免广告码
      getDouYinQrCode() {
        const aid = this.author.authorList[this.author.authorCurrent].id;
        const code = this.author.authorList[this.author.authorCurrent].codeInfo.length > 0 ? this.author.authorList[this.author.authorCurrent].codeInfo[0].code : '';
        if (code) {
          uni.showLoading({
            title: '获取中',
            mask: true
          })
          createDouYinQrCode({
            tid: this.currentToolId,
            aid,
            code,
          }).then(result => {
            uni.hideLoading();
            if (result && result.data) {
              uQRCode.make({
                canvasId: 'qrcode',
                componentInstance: this,
                text: result.data,
                size: 400,
                margin: 20,
                backgroundColor: '#ffffff',
                foregroundColor: '#000000',
                fileType: 'jpg',
                errorCorrectLevel: uQRCode.errorCorrectLevel.L,
                success: res => {
                  if (res) {
                    this.douyinQrcode = res;
                  }
                }
              });
            }
          }).catch(() => {
            uni.hideLoading();
          })
        } else {
          uni.showToast({
            title: '请添加口令在操作',
            icon: 'none'
          })
        }
      },

      // 编辑专辑成功
      editAlbumSuccess() {
        this.getAllAlbumByAuthorId();
      },

      // 关闭创建专辑
      closeCreateArtworksAlbum() {
        this.createAlbum.popupShow = false;
      },

      // 点击创建专辑
      handleCreateArtworksAlbum() {
        // if (this.tabsCurrent == 0) {
        //   uni.showToast({
        //     title: '全部不允许创建专辑',
        //     icon: 'none'
        //   });
        //   return;
        // }
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const type = this.artworksTypeAllListData[this.tabsCurrent].id; // 类型id
        this.createAlbum.albumInfo.artworks_type_id = type;
        this.createAlbum.albumInfo.author_id = author_id;
        this.createAlbum.popupShow = true;
      },

      // 添加工具玩法
      goPublishTool() {
        uni.navigateTo({
          // url: `/pages/tool/createTool?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${this.tabsCurrent}`
          url: `/pages/tool/toolCategory?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${this.tabsCurrent}`
        })
      },

      // 前往上传作品
      goPublishArtworks() {
        if (this.author.authorList.length > 0) {
          let artworksType = this.artworksTypeAllListData[this.tabsCurrent].id;
          const currentArtworksTypeIndex = this.tabsCurrent == 0 ? 0 : this.tabsCurrent - 1;
          if (artworksType == 9) {
            uni.navigateTo({
              // url: `/pages/tool/createTool?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${this.tabsCurrent}`
              url: `/pages/tool/toolCategory?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${currentArtworksTypeIndex}`
            })
          } else if (artworksType == 7) {
            uni.navigateTo({
              url: `/pages/publish/textTemplate?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${currentArtworksTypeIndex}`
            })
          } else if (artworksType == 11) {
            uni.navigateTo({
              url: `/pages/wechatCircle/uploadWechatCircle?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${currentArtworksTypeIndex}`
            })
          } else {
            uni.navigateTo({
              url: `/pages/publish/publish?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${currentArtworksTypeIndex}`
            })
          }
        } else {
          uni.showModal({
            title: '温馨提示',
            content: `先创建主页，才能上传作品哦~`,
            confirmText: '立即创建',
            showCancel: false,
            confirmColor: '#56d39d',
            success: ({ confirm, cancel }) => {
              if (confirm) {
                this.author.authorHomePopupShow = true;
              }
            }
          })
        }
      },

      // 前往排序
      goSort() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const type = this.artworksTypeAllListData[this.tabsCurrent].id; // 类型id
        const client_sort = this.author.authorList[this.author.authorCurrent].client_sort; // 排序类型
        if (client_sort != 2) {
          uni.navigateTo({
            url: `/pages/artworks/sort?author_id=${author_id}&type=${type}`
          })
        } else {
          uni.showToast({
            title: '该模式下不支持排序',
            icon: 'none'
          })
        }
      },

      // 前往专辑排序
      goAlbumSort() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const type = this.artworksTypeAllListData[this.tabsCurrent].id; // 类型id
        const client_sort = this.author.authorList[this.author.authorCurrent].client_sort; // 排序类型
        uni.navigateTo({
          url: `/pages/artworks/albumSort?author_id=${author_id}&type=${type}`
        })
      },

      // 修改类型
      tabsChange(index) {
        // 滚动条滚动到顶部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        });
        this.pageNum = 1;
        this.tabsCurrent = index;
        if (this.currentShowType === 0) {
          this.getAllArtworksList();
        } else {
          this.getAllAlbumByAuthorId();
        }
        this.$emit('onChangeTabs', index);
      },

      // 点击展示类型
      handleShowType(index) {
        this.currentShowType = index;
        this.pageNum = 1;
        if (index === 0) {
          this.getAllArtworksList();
        } else {
          this.getAllAlbumByAuthorId();
        }
      },

      onPageReachBottom() {
        uni.$on('onReachBottom', () => {
          if (!this.showNoMoreFlag && !this.loadingList && this.currentShowType === 0) {
            this.getAllArtworksList(1);
          } else {
            uni.showToast({
              title: '没有更多的数据啦！',
              icon: 'none'
            })
          }
        })
      },
    },
    beforeDestroy() {
      console.log('销毁组件作品')
      uni.$off('onReachBottom', () => {
        console.log('异常成功onReachBottom')
      });
    },
  }
</script>

<style lang="scss" scoped>
    .artworks-container{
    padding: 32rpx 0 120rpx 0;
    min-height: 80vh;
    margin-top: -24rpx;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;

    &-top{
      padding: 0 32rpx 30rpx 32rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #eaeaea;

      &-left{
        width: 320rpx;
        height: 60rpx;
        border-radius: 8rpx;
        background-color: rgb(238, 238, 239);
        display: flex;
        align-items: center;
        overflow: hidden;

        .module-item{
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          flex: 1;
          color: #666;
          border-radius: 8rpx;
        }

        .active-item{
          background-color: $uni-color-primary;
          color: #fff;
        }
      }

      &-right{
        width: 190rpx;
        height: 60rpx;
        background-color: #f3f7fb;
        border-radius: 8rpx;
        border: 2rpx solid $uni-color-primary;
        text-align: center;
        line-height: 54rpx;
        color: $uni-color-primary;
      }
    }

    .tabs-container{
      height: 100rpx;
      padding: 0 32rpx;
    }
  }

  .artworks-list-container{
    padding: 0 32rpx;
  }

  .bottom-main{
    position: fixed;
    bottom: calc(var(--window-bottom) + 32rpx);
    z-index: 20;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 2;

    .bottom-view{
      display: flex;
      justify-content: center;
      min-width: 400rpx;
      padding: 24rpx 30rpx;
      background: #fff;
      border: 2rpx solid $uni-color-primary;
      border-radius: 92rpx;

      &-button{
        color: $uni-color-primary;
        font-size: 24rpx;
        position: relative;
        padding-right: 34rpx;
        margin-right: 34rpx;
        white-space: nowrap;

        &-text{
          color: $uni-color-primary;
          padding-left: 6rpx;
        }

        .new-icon{
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          right: 16rpx;
          top: -26rpx;
        }
      }

      &-button-before{
        &::before{
          content: "";
          position: absolute;
          right: 0;
          width: 2rpx;
          height: 32rpx;
          background: #e9e9e9;
        }
      }

      &-button-padding{
        padding-right: 16rpx;
        margin-right: 16rpx;
      }

      &-button-margin0{
        margin-right: 0;
        padding-right: 0;
      }
    }
  }

  .select-sort-container{
    padding: 32rpx;

    .title_{
      font-size: 38rpx;
      font-weight: 700;
      text-align: center;
      margin-bottom: 32rpx;
    }

    .select-sort-content{
      display: flex;
      text-align: center;

      .select-sort-left{
        flex: 1;
        padding: 32rpx 24rpx;
        background-color: #f3f7fb;
      }

      .select-sort-right{
        flex: 1;
        padding: 32rpx 24rpx;
        background-color: #fbf7f6;
      }

      .applet-title{
        margin-bottom: 32rpx;
        font-size: 32rpx;
      }

      .select-sort-item{
        margin-bottom: 32rpx;
        padding: 24rpx;
        border: 2rpx solid #ececec;
        border-radius: 16rpx;
        background-color: #fff;
        font-size: 28rpx;

        .select-sort-item-icon{
          margin-right: 6rpx;
        }
      }

      .select-sort-active{
        background: $uni-color-primary;
        color: #fff;
      }

      .select-sort-item-bottom0{
        margin-bottom: 0;
      }
    }
    .select-sort-tips{
      font-size: 24rpx;
      padding-top: 32rpx;
      color: #888;
      line-height: 40rpx;
    }
  }

  .tool-container{
    position: relative;

    .tool-tip-title{
      text-align: center;
      font-size: 32rpx;
      color: $uni-color-primary;
      padding: 48rpx 0;
      font-weight: bold;
      background: linear-gradient(to bottom, #babbf8, #ffffff);
    }

    .tool-content{
      padding: 32rpx;
      border: 2rpx solid #ececec;
      border-radius: 16rpx;
      margin: 0 32rpx 32rpx;
    }

    .tool-btn{
      color: #fff;
      background-color: $uni-color-primary;
      text-align: center;
      padding: 16rpx 0;
      border-radius: 16rpx;
      margin-bottom: 32rpx;
    }

    .tool-qrcode{
      padding: 32rpx;
      border: 2rpx solid #ececec;
      border-radius: 16rpx;
    }

    .save-tip{
      font-size: 28rpx;
      padding-top: 24rpx;
      text-align: center;
      color: #333;
    }

    .qrcode-image{
      width: 400rpx;
      height: 400rpx;
      display: block;
      margin: auto;
    }

    .close-btn{
      position: absolute;
      top: 24rpx;
      right: 24rpx;
    }

    .video-view{
      padding: 0 32rpx;

      .video-guide{
        width: 100%;
        height: 250rpx;
        border-radius: 16rpx;
      }
    }
  }

  .album-list-icon{
    width: 120rpx;
    height: 120rpx;
    background: url(https://img.alicdn.com/imgextra/i2/1888948409/O1CN01GJeuE22BzNRhpM2ya_!!1888948409.png) no-repeat;
    background-size: cover;
    position: fixed;
    right: 32rpx;
    bottom: 300rpx;
    z-index: 999;
  }
</style>
